<template>
  <el-pagination
    class="custom_pagination"
    :class="alignClassName"
    v-model:current-page="param.currentPage"
    v-model:page-size="param.pageSize"
    :page-sizes="param.pageSizes"
    :size="param.size"
    :disabled="param.disabled"
    :background="param.background"
    :layout="param.layout"
    :total="param.total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    @prev-click="prevClick"
    @next-click="nextClick"
  />
</template>

<script lang="ts" setup>
import {
  ref,
  reactive,
  watch,
  computed,
  inject,
  defineEmits,
  onMounted,
} from "vue";
const $axios: any = inject("$axios");
const $common: any = inject("$common");
const $utils: any = inject("$utils");
const $MessageBox: any = inject("$MessageBox");
const emits = defineEmits(["handleSizeChange", "handleCurrentChange", "prevClick", "nextClick"]);

interface Props {
  align?: string;
  currentPage?: number;
  pageSize?: number | string | null;
  pageSizes?: any;
  size?: string;
  background?: boolean;
  disabled?: boolean;
  layout?: string;
  total?: number | string | null;
}
const props = withDefaults(defineProps<Props>(), {
  align: 'right', //对齐方式
  currentPage: 1, //当前页数
  pageSize: 10, //每页显示条目个数
  pageSizes: [10, 20, 50, 100, 200], //每页显示个数选择器的选项设置
  size: 'default', //分页大小
  background: false, //是否为分页按钮添加背景色
  disabled: false, //是否禁用分页
  layout: "total, sizes, prev, pager, next, jumper", //组件布局，子组件名用逗号分隔
  total: 400, //数据总数
});
interface Param {
  [key: string]: any; // 添加索引签名
  currentPage: number;
  pageSize: number | string | null;
  pageSizes: any;
  size: string;
  background: boolean;
  disabled: boolean;
  layout: string;
  total: number | string | null;
}
const param: Param = reactive({
  currentPage: props.currentPage,
  pageSize: props.pageSize,
  pageSizes: props.pageSizes,
  size: props.size,
  background: props.background,
  disabled: props.disabled,
  layout: props.layout,
  total: props.total,
});
watch(
  () => props,
  (newValue) => {
    if (newValue.currentPage) {
      param.currentPage = newValue.currentPage;
    }
    param.total = newValue.total || 0;
  },
  { immediate: true, deep: true },
);
/** 计算 */
const alignClassName = computed(() => {
  if (props.align == 'left') {
    return 'align_left'
  }
  if (props.align == 'right') {
    return 'align_right'
  }
});

/** 每页显示条目个数 改变时触发 */
const handleSizeChange = (val: any) => {
  param.pageSize = val;
  emits('handleSizeChange', val);
}
/** 当前页数 改变时触发 */
const handleCurrentChange = (val: any) => {
  emits('handleCurrentChange', val);
}
/** 点击上一页时触发 */
const prevClick = (val: any) => {
  console.log(`prevClick: ${val}`)
  emits('prevClick', val);
}
/** 点击下一页时触发 */
const nextClick = (val: any) => {
  console.log(`nextClick ${val}`)
  emits('nextClick', val);
}
onMounted(() => {});
</script>

<style lang="scss" scoped>
.custom_pagination {
  margin-top: 16px;
  // 选择页数列
  :deep(.el-pagination__sizes) {
    .el-select__wrapper {
      background-color: transparent;
    }
  }
  // 上一页
  :deep(.btn-prev) {
    margin-right: 4px;
    border: 1px solid var(--el-border-color);
  }
  // 页数项
  :deep(.el-pager) {
    li {
      margin: 0 4px;
      border: 1px solid var(--el-border-color);
      color: var(--text-black-65);
    }
    // 选中
    .is-active {
      border: 1px solid var(--theme-primary);
      background-color: var(--theme-primary);
      color: var(--text-white-85);
    }
  }
  // 下一页
  :deep(.btn-next) {
    margin-left: 4px;
    border: 1px solid var(--el-border-color);
  }
  // 前往多少页
  :deep(.el-pagination__jump) {
    .el-input__wrapper {
      background-color: transparent;
    }
  }
}
.align_left {
  justify-content: flex-start
}
.align_right {
  justify-content: flex-end;
}
</style>
